<template>
  <div>
    <!-- 搜索 -->
    <HeadSeach ref="headSeach" />
    <div class="app-content">
      <div class="operation">
        <el-button type="primary" class="ml-10" icon="el-icon-plus" size="mini" @click="add">新增</el-button>
        <el-button type="danger" icon="el-icon-delete" size="mini" @click="delBatch">删除 </el-button>
        <el-table :data="list" style="width: 100%" size="small" row-key="id" @selection-change="selectionChange">
          <el-table-column type="selection" min-width="30" />
          <el-table-column label="仓库编码" min-width="50" prop="storage_sn" />
          <el-table-column label="仓库分区编号" min-width="50" prop="area_sn" />
          <el-table-column label="货架编号" min-width="50" prop="shelf_sn" />
          <el-table-column label="描述" min-width="50" prop="desc" />
          <el-table-column label="创建时间" min-width="50" prop="create_time" />
          <el-table-column label="操作" min-width="50">
            <template slot-scope="scope">
              <el-link type="primary" :underline="false" @click="editValue(scope.row.id)">编辑</el-link>
              <el-link type="danger" :underline="false" @click="delValue(scope.row.id)">删除</el-link>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 新增/编辑 -->
    <el-dialog :title="param.id?'编辑仓库货架':'新增仓库货架'" :visible.sync="dialogAdminVisible" width="35%">
      <el-form ref="form" :model="param" :rules="rules" label-width="150px" class="demo-ruleForm" :show-message="false">
        <el-form-item label="仓库编号" prop="storage_sn">
          <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="12"><el-input v-model="param.storage_sn" size="small" /></el-col>
        </el-form-item>
        <el-form-item label="仓库分区编号" prop="area_sn">
          <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="12"><el-input v-model="param.area_sn" size="small" /></el-col>
        </el-form-item>
        <el-form-item label="货架编号" prop="shelf_sn">
          <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="12"><el-input v-model="param.shelf_sn" size="small" /></el-col>
        </el-form-item>
        <el-form-item label="描述">
          <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="12"><el-input v-model="param.desc" size="small" /></el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogAdminVisible = false">取 消</el-button>
        <el-button type="primary" @click="determine">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { Storage } from '@/api/storage/storage'
import { StorageShelf } from '@/api/storage/storageShelf'
import { deleteValue } from '@/utils/public'
import HeadSeach from '@/components/HeadSeach'
export default {
  name: 'Shelves',
  components: {
    HeadSeach
  },
  data() {
    return {
      seach: {},
      listStorage: [],
      list: [],
      dialogAdminVisible: false,
      param: {},
      rules: {
        storage_sn: { required: true, trigger: 'blur' },
        area_sn: { required: true, trigger: 'blur' },
        shelf_sn: { required: true, trigger: 'blur' }
      },
      selectId: []
    }
  },
  created() {
    this.getList()
  },
  mounted() {
    this.assembleSeachData()
  },
  methods: {
    // 组装搜索数据
    async assembleSeachData() {
      this.listStorage = await Storage.listStorage().then((res) => { return res.data }).catch(() => {})
      const searchData = {
        label: '仓库货架搜索',
        size: 'small',
        model: {
          area_sn: '',
          storage_sn: ''
        },
        options: [
          {
            tag: 'Select',
            prop: 'storage_sn',
            placeholder: '仓库',
            data: this.listStorage,
            showPropData: {
              label: 'storage_name',
              value: 'storage_sn'
            }
          },
          {
            tag: 'Input',
            prop: 'area_sn',
            placeholder: '单字母'
          }],
        cb: (data) => {
          this.seach = data
          this.getList()
        }
      }
      this.$refs.headSeach.init(searchData)
    },
    // 选择
    selectionChange(selection) {
      this.selectId = selection.map(val => val.id)
    },
    // 编辑/新增
    add() {
      this.param = {}
      this.dialogAdminVisible = true
    },
    editValue(id) {
      StorageShelf.getStorageShelf({ id }).then((res) => {
        this.param = res.data
        this.dialogAdminVisible = true
      }).catch(() => {})
    },
    // 删除
    delValue(id) {
      deleteValue({
        _this: this,
        success: (res) => {
          StorageShelf.delStorageShelf({ id }).then((res) => {
            this.$message.success('删除成功')
            this.getList()
          }).catch(() => {})
        }
      })
    },
    delBatch() {
      this.delValue(this.selectId.join(','))
    },
    getList() {
      StorageShelf.listStorageShelf(this.seach).then((res) => {
        this.list = res.data
      }).catch(() => {})
    },
    determine() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          StorageShelf.addStorageShelf(this.param).then((res) => {
            this.$message.success('保存成功')
            this.dialogAdminVisible = false
            this.getList()
          }).catch(() => {})
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
